import React from "react";
import { Drawer, Button, Space } from 'antd';
import FormCom from "@c/form/Index";
import http from "../../../utils/request";

class ExportDrawer extends React.Component {
  constructor(props){
    super(props);
    this.state = { 
      visible: false,
      // 选择账号
      filename: '',
      formLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      },
      formItem: [
        { 
          type: "SelectComponent",
          label: "账号", 
          url: "accountList",
          method: "get",
          name: "account_uid",
          required: true,
          defaultValue: "光云raycloud",
          propsKey: {
              label: "name",
              value: "uid"
          },
          style: { width: "150px" },
          placeholder: "请选择"
      },
      { 
          type: "RadioButton",
          label: "时间区域", 
          name: "time_range", 
          required: true, 
          style: { width: '100%' },
          options: [
              { label: "1周", value: 7 },
              { label: "1个月", value: 30 },
              { label: "2个月", value: 60 }
          ],
      },
    ]
    }
  };

  componentDidMount(){
    this.props.onRef(this);
  }
  onFormRef = (ref) => {
    this.child = ref;
  }

  showDrawer = (params) => {
    console.log(params)
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  // 下载
  downloadExcel = (value) => {
      console.log('downloadExcel', value)
      const oa = document.createElement('a');
      oa.href = `http://ops.raycloud.cn/download/${value}`;
      oa.setAttribute('target', '_blank');
      document.body.appendChild(oa);
      oa.click();
  }

  handelFormSubmit = (value) => {
    console.log(value)
    // 请求api
    http.post('/aliyun/billing/export',value).then(response=>{
      console.log(response)
      const filename = response.data.data;
      this.downloadExcel(filename);
      // this.setState({
      //   filename: response.data.data
      // })
    }).catch()
    // 关闭drawer
    this.onClose();
    
  }

  render() {
    return (
      <div>
        <Drawer
          title="账号订单导出选择"
          width={500}
          onClose={this.onClose}
          visible={this.state.visible}
          extra={
            <Space>
              <Button onClick={this.onClose}>Cancel</Button>
            </Space>
          }
        >
        <FormCom 
            onRef={this.onFormRef}
            onBlur={this.onBlurEvent}
            formItem={this.state.formItem} 
            formLayout={this.state.formLayout} 
            submit={this.handelFormSubmit}
          >
        </FormCom>
      </Drawer>
      </div>
    );
  }
}

export default ExportDrawer